<template>
  <el-dialog width="50%"
             :close-on-click-modal="false"
             :model-value="show"
             @close="show = false"
             :destroy-on-close="true"
             title="订单明细">
    <el-scrollbar v-loading="loading"
                  class="ba-table-form-scrollbar">
      <el-table border
                :data="tableData"
                :header-cell-style="{color: '#000'}"
                stripe
                max-height="450">
        <el-table-column prop="order_id"
                         label="订单ID"></el-table-column>
        <el-table-column prop="status_value"
                         label="状态"></el-table-column>
        <el-table-column prop="shipping_documents"
                         label="面单链接"></el-table-column>
        <el-table-column prop="msg"
                         label="创建面单结果"></el-table-column>
        <el-table-column prop="created_time"
                         label="添加时间"></el-table-column>
      </el-table>
      <el-pagination @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page="pageNum"
                     :page-sizes="pageSizes"
                     background
                     :page-size="pageSize"
                     :total="pageTotal"
                     layout="sizes, total, ->, prev, pager, next, jumper">
      </el-pagination>
    </el-scrollbar>
    <template #footer>
      <el-button type="primary"
                 @click="show = false">关闭</el-button>
    </template>
  </el-dialog>
</template>

<script lang='ts' setup>
import { ref, watch } from 'vue'
import { getBatchLog } from '/@/api/backend/order/orderDocument'

const pageNum = ref(1)
const pageSize = ref(10)
const pageSizes = [10, 20, 30, 50, 100, 200, 250, 300, 500]
const pageTotal = ref(0)
const loading = ref(false)
const show = ref(false)
const tableData = ref([] as any[])

const init = () => {
    batchLog()
}

const handleSizeChange = (val:number) => {
    pageNum.value = 1
    pageSize.value = val
    batchLog()
}
const handleCurrentChange = (val:number) =>  {
    pageNum.value = val
    batchLog()
}
const batchLog = () => {
    loading.value = true
    getBatchLog({ batch_id: props.curRow.id, page: pageNum.value, limit: pageSize.value }).then(res => {
        if(res.data && res.data.list.length) {
            tableData.value = res.data.list
            pageTotal.value = res.data.total
        } else {
            tableData.value = []
            pageTotal.value = 0
        }
        loading.value = false
    })
}

const props = defineProps({
    curRow:{
        required: true,
        type: Object,
        default: () => {return {}}
    }
})

defineExpose({
    show
})

watch(
    () => show.value,
    (v) => {
        if(v){
            init()
        }
    }
)

</script>

<style scoped lang='scss'>
:deep(.el-table + .el-pagination){
    margin-top: 15px;
}
</style>